import { NavLink, Outlet, useNavigate } from "react-router-dom";
import React, { useEffect, useState } from "react";
import {
  YahooOutlined,
  SnippetsOutlined,
  DiscordOutlined,
  InstagramOutlined,
  LayoutOutlined,
  StarOutlined,
  FolderAddOutlined,
  CloudOutlined,
  UserSwitchOutlined,
  SwitcherOutlined,
  BankOutlined,
  FundProjectionScreenOutlined,
  UnorderedListOutlined
} from "@ant-design/icons";
import { Layout, Menu, MenuProps, theme } from "antd";
import logo from "../../assets/images/logo.png";
import "./home.css";
import { Input } from 'antd';
import Mymodal from "../../compoents/commont/Mymodel";
import top1 from '../../assets/top1.png'
import top2 from '../../assets/top2.png'
import { Popover } from 'antd';
import EwmImg from '../../assets/images/ewm.png'
const index: React.FC = () => {
  //左边菜单高亮
  const [selectedKey, setSelectedKey] = useState(localStorage.getItem('selectedItem') || '');
  // 二维码提示
  const text = <img src={EwmImg} style={{ height: '220px', width: '180px' }} alt="" />;

  const { Header, Sider, Content } = Layout;
  type MenuItem = Required<MenuProps>["items"][number];
  //本地提取头像
  const imgurl = localStorage.getItem('imgurl') ? localStorage.getItem('imgurl') as string : ''

  const token = localStorage.getItem("token");
  const exit = () => {
    if (window.confirm('您确定要退出登录吗')) {
      localStorage.removeItem("token");
      console.log('已退出登录');
      // 刷新页面以确保应用状态更新
      window.location.reload()
    }
  };
  function getItem(
    label: React.ReactNode,
    path: string,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[]
  ): MenuItem {
    const handleClick = () => {
      localStorage.setItem('selectedItem', key as string)
      setSelectedKey(key as string)
    }
    return {
      key,
      path,
      icon,
      children,
      label: <NavLink to={path} onClick={handleClick}>{label}</NavLink>,
    } as MenuItem;
  }


  const items: MenuItem[] = [
    getItem("为你推荐", "/home/recommend", "1", <StarOutlined />),
    getItem("模板中心", "/home/template", "2", <LayoutOutlined />),
    getItem("素材中心", "/home/meterial", "3", <SnippetsOutlined />),
    getItem("创建设计", "/home/create", "4", <FolderAddOutlined />),
    getItem("我的设计", "/home/mydesign", "5", <UserSwitchOutlined />),
    getItem("商品管理", "/home/guogoods", "6", <DiscordOutlined />),
    getItem("果币充值", "/home/guorecharge", "7", <YahooOutlined />),
    getItem("订单管理", "/home/guorder", "8", <CloudOutlined />),
    getItem("果首页", "/home/guohome", "9", <InstagramOutlined />),
    getItem(
      "图片编辑",
      "/home/imageediting",
      "10",
      <FundProjectionScreenOutlined />
    ),
    getItem("批量设计", "/home/batchdesign", "11", <SwitcherOutlined />),
    getItem("工作台", "/home/workbench", "13", <UnorderedListOutlined />),
    getItem("创建设计", "/home/featured", "12", <BankOutlined />),
  ];
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const [isModelOpen, setIsModelOpen] = useState(false);
  const handleLoginClick = () => {
    setIsModelOpen(true)
  }
  const handleModalClose = () => {
    setIsModelOpen(false)
  }
  const [showSearchBox, setShowSearchBox] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 150) {
        setShowSearchBox(true)
      } else {
        setShowSearchBox(false)
      }
    }
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  const navigate = useNavigate()
  // 个人信息页
  const toMy = () => {
    navigate('/home/mycenter')
  }

  //跳转企业页面
  const handleEnterprise = () => {
    navigate('/enterprise')
  }
  return (
    <div>
      <Layout>
        <Sider
          style={{ background: "#fff" }}
          trigger={null}
          collapsible
          collapsed={collapsed}
        >
          <div className="demo-logo-vertical" />

          <div
            style={{
              height: "55px",
              width: '200px',
              background: colorBgContainer,
              position: 'fixed',
              top: "0",
              left: '0',
              zIndex: "9999999999"
            }}
          >
            <img src={logo} alt="" />
          </div>
          <Menu
            theme="light"
            mode="inline"
            style={{ position: 'fixed', left: '0', top: '55px', width: '200px', zIndex: '9999999999', height: '1000px' }}
            selectedKeys={[selectedKey]}
            items={items}
          ></Menu>
        </Sider>
        <Layout>
          <Header
            style={{
              width: '88%',
              height: "55px",
              padding: 0,
              background: colorBgContainer,
              position: "fixed",
              left: '200px',
              top: "0",
              zIndex: "999999",
              boxShadow: "3px 3px 5px  #ebeef5",
              display: 'flex',
              justifyContent: 'flex-end',
            }}
          >
            <div className='searchbox' style={{ display: showSearchBox ? 'block' : 'none' }}>
              <Input placeholder="搜索" />
            </div>
            <div className="vipp"><img src={top1}></img><p className="size">VIP会员</p></div>
            <div className="server" onClick={handleEnterprise}><img src={top2}></img><p className="size">企业服务</p></div>
            <div className="imgbox">
              {token ? (
                <img src={imgurl} className="img" onClick={toMy}></img>
              ) : (
                <button className="dl" onClick={handleLoginClick}>
                  登录/注册
                </button>
              )}
              <div className="img_box">
                <p className="user">用户ID:92314539</p>
                <div className="show">
                  <p className="vip">开通VIP尊享权限</p>
                  <button className="btn">立即抢购会员</button>
                </div>
                <div className="team">
                  <span className="sp">当前团队</span>
                  <div className="span">
                    <span className="people">个人版</span>
                    <span className="creat">创建团队&gt;</span>
                  </div>
                </div>
                <div className="bom">
                  <span>订单/发票</span>
                  <span>消息中心</span>
                  <span>我的优惠券</span>
                  <span className="exit" onClick={exit}>
                    退出登录
                  </span>
                </div>
              </div>
            </div>
            <Mymodal isModalOpen={isModelOpen} onClose={handleModalClose}></Mymodal>
          </Header>
          <Content
            style={{
              padding: 10,
              minWidth: 1310,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </div>
  );
};

export default index;
